<template>
  <el-form
    id="ik-info-head"
    ref="form"
    v-loading="loading"
    :model="pageData.formData.head"
    class="ik-info-head"
    :inline="true"
    label-width="120px"
    :disabled="pageData.mode === 'details'"
  >
    <el-row v-for="row in pageData.formItems" :key="row.rowIndex">
      <el-col v-for="col in row.items" :key="col.id" class="mb-5" :span="col.span">
        <form-select-item
          v-if="col.type==='select'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          key-field="key"
          value-field="value"
        />
        <form-group-select-item
          v-else-if="col.type==='group'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
          :data-down="loading"
        />
        <form-date-item
          v-else-if="col.type==='date'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <form-time-item
          v-else-if="col.type==='time'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <form-datetime-item
          v-else-if="col.type==='datetime'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <form-number-item
          v-else-if="col.type==='number'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <form-image-item
          v-else-if="col.type==='oss'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <form-video-item
          v-else-if="col.type==='video'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <form-popup-item
          v-else-if="col.type==='popup'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          v-on="col.handleEvent"
        />
        <form-text-item
          v-else
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getById, save, update } from '@/api/ik/data/dataApi'

export default {
  inject: ["pageData"],
  data() {
    return {
      id: "",
      loading: false
    }
  },
  created() {
    this.pageData.mode = this.$route.params.mode || "add"
    this.id = this.$route.query.id || 0
    if (this.id !== 0) {
      this.get(this.id)
    }
  },
  methods: {
    /**
     * 获取数据
     * @param id
     */
    get(id) {
      this.loading = true
      getById(this.pageData.bgPath, id)
        .then(res => {
          this.pageData.formData = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 更新表单
     * @param key
     * @param value
     */
    updateFormData(key, value) {
      this.$set(this.pageData.formData.head, key, value)
    },
    /**
     * 保存或修改数据
     */
    saveOrUpdate() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const api = this.pageData.formData.head.id === undefined ? save : update
          this.loading = true
          if (this.pageData.useStore) {
            this.pageData.formData.head["storeId"] = this.$store.getters["user/getStoreId"]
            this.pageData.formData.head["storeCode"] = this.$store.getters["user/getStoreCode"]
          }
          api(this.pageData.bgPath, this.pageData.formData).then(res => {
            this.id = res.data
            this.get(res.data)
            this.$message.success("数据已保存")
          })
            .finally(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
